<script setup lang="ts">
// 引入富文本编辑器CSS
import '@wangeditor/editor/dist/css/style.css'
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
// 导入富文本编辑器的组件
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {BASE_URL} from "@/utils/request.ts";
import {message} from "ant-design-vue";
import {addBlog} from "@/api/blogController.ts";
import {useLoginUserStore} from "@/stores/useLoginUserStore.ts";
import router from "@/router";


// 编辑器实例，必须用 shallowRef[2,3,5](@ref)
const editorRef = shallowRef()
const loginUserStore = useLoginUserStore();


// 内容 HTML
const valueHtml = ref('')
const title = ref('')
const tags = ref([])

// 模拟 ajax 异步获取内容[5,8](@ref)
// onMounted(() => {
//   setTimeout(() => {
//     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
//   }, 1500)
// })

const toolbarConfig = {
  excludeKeys: ['video', 'group-video'] // 去掉视频上传/插入
}
const editorConfig = {
  placeholder: '请输入博客内容...',
  // 可以根据需要在这里配置图片上传等[2,3](@ref)
  MENU_CONF: {
    uploadImage: {
      server: BASE_URL + '/file/blog/upload', // ✅ 你的后端上传接口地址
      fieldName: 'file', // ✅ 后端接收的文件字段名
      // 自定义插入图片
      customInsert(res: any, insertFn: Function) {
        // 假设后端返回 { url: "https://xxx.jpg" }
        if (res.code === 0 && res.data) {
          const url = res.data
          insertFn(url) // 把图片插入到编辑器
        } else {
          message.error("图片上传失败，" + res.message)
        }

      },
    },
  },
}


// 组件销毁时，也及时销毁编辑器[2,3,5,7](@ref)
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 编辑器创建完成[2,3,5](@ref)
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

//提交创建博客
const handleSubmit = async () => {
  const addBlogParams = {
    title: title.value,
    content: valueHtml.value,
    tags: tags.value,
    userId: loginUserStore.loginUser.id
  }
  const res = await addBlog(addBlogParams);
  if (res.data.code === 0 && res.data.data) {
    message.success("创建成功");
    await router.push({
      path: '/blog',
      replace: true,
    })
  } else {
    message.error("创建失败，" + res.data.message)
  }
}
</script>

<template>
  <div id="BlogAddPage">
    <div class="title-bar">
      <a-input v-model:value="title" placeholder="请输入博客标题..." style="height: 50px;"/>
      <a-button type="primary" @click="handleSubmit" style="margin-left: 12px;margin-right: 16px">提交</a-button>
    </div>
    <a-select
        v-model:value="tags"
        mode="tags"
        style="width: 100%;margin-bottom: 16px;"
        placeholder="请输入博客标签，按下回车确认"
        :open="false"
    />
    <div style="border: 1px solid #ccc">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          mode="default"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="handleCreated"
      />
    </div>
  </div>
</template>

<style scoped>
#BlogAddPage {
  background-color: white;
  padding: 24px;
}

/* 可以在这里添加组件作用域的样式 */
.title-bar {
  display: flex;
  align-items: center;
  background-color: white;
  margin-bottom: 20px;
}

.title-bar .ant-input {
  flex: 1;
  font-size: 18px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s ease;
  outline: none;
  padding: 0 16px;
  height: 50px;
}

.title-bar .ant-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.title-bar .ant-btn {
  height: 50px;
  font-size: 16px;
  padding: 0 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.title-bar .ant-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.25);
}

/* 标签输入框样式 */
.ant-select {
  margin-bottom: 20px;
}

:deep(.ant-select-selector) {
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
  padding: 4px 11px !important;
  height: auto !important;
  min-height: 40px;
}

:deep(.ant-select-focused:not(.ant-select-disabled) .ant-select-selector) {
  border-color: #1890ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

:deep(.ant-select-selection-item) {
  margin: 2px 0 !important;
  padding: 2px 8px !important;
  border-radius: 4px;
}

/* 编辑器样式优化 */
#BlogAddPage > div:nth-child(3) {
  border-radius: 8px;
  overflow: hidden;
}
</style>
